<template>
	<view>
		<view class="padding">
			<button @click="showModal" class="cu-btn block bg-blue margin-tb-sm lg">发起调货</button>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabArr"
					:key="index" @tap="tabSelect" :data-id="index">
					{{tabArr[index]}}
				</view>
			</view>
		</scroll-view>
		<view v-for="(item, index) in list" :key="index" class="cu-list  padding-lr-sm margin-top-sm"
			@tap="toDetail(item._id)">
			<view class="padding bg-white ">
				<view class="padding-xs text-lg">
					<view class="flex">
						<view class="text-black" style="flex: 1;">
							<text>{{item.goods[0].name}}</text>
							<text>,尺码:{{item.goods[0].sku}}</text>
						</view>
						<text v-if="item.status===0" class="text-blue">待接单</text>
						<text v-if="item.status===1" class="text-blue">待付款</text>
						<text v-if="item.status===2" class="text-blue">待发货</text>
						<text v-if="item.status===3" class="text-blue">已完成</text>
					</view>
				</view>
				<view class="padding-xs">
					<text>调货价:{{(item.goods[0].transfer_price/100).toFixed(2)}}元</text>
				</view>
				<view class="padding-xs" v-if="item.remark">
					<text class="text-grey">备注:{{item.remark}}</text>
				</view>
				<view class="padding-xs text-sm">
					<text class="text-grey">创建时间:{{$moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')}}</text>
				</view>
				<view class="padding-xs" @tap.stop>
					<view class="flex">
						<view style="flex: 1;" v-if="member.member_guid===item.create_uid">
							<button @click="cancelOrder(item._id)" class="cu-btn block bg-green sm"
								style="width: 50%;">取消订单</button>
						</view>
						<view style="flex: 1;" v-if="member.member_guid!==item.create_uid&&item.status===1">
							<button @click="cancelTakeOrder(item._id)" class="cu-btn block bg-green sm"
								style="width: 50%;">取消接单</button>
						</view>
						<view style="flex: 1;" v-if="member.member_guid!==item.create_uid&&item.status===0">
							<button @click="takeOrder(item._id)" class="cu-btn block bg-blue sm"
								style="width: 50%;margin-left: auto;">接单</button>
						</view>
						<view style="flex: 1;" v-if="member.member_guid===item.create_uid&&item.status===1">
							<button @click="takeOrderCreate(item)" class="cu-btn block bg-blue sm"
								style="width: 50%;margin-left: auto;">去付款</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='receivablesModal'?'show':''">
			<view class="cu-dialog padding" @tap.stop style="height: 80%;">
				<view class="cu-bar  justify-end">
					<view class="content">调换货</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding text-left bg-white " @click="toCreate(0)" style="border-radius: 20rpx;">
					<view class="flex align-center ">
						<view class="flex-sub flex align-center">
							<image src="../../../static/avatar_placeholder.png" style="width: 70rpx;height: 70rpx;">
							</image>
							<view class="margin-left">
								<text>调货</text>
								<view class="text-gray text-sm">发起调货</view>
							</view>
						</view>
						<text class="lg text-gray cuIcon-right"></text>
					</view>
				</view>
				<!-- <view class="padding text-left bg-white margin-tb-sm" @click="toCreate(1)"
					style="border-radius: 20rpx;">
					<view class="flex align-center ">
						<view class="flex-sub flex align-center">
							<image src="../../../static/shangping.png" style="width: 70rpx;height: 70rpx;">
							</image>
							<view class="margin-left">
								<text>换货</text>
								<view class="text-gray text-sm">发起换货</view>
							</view>
						</view>
						<text class="lg text-gray cuIcon-right"></text>
					</view>
				</view> -->
				<view class="padding">
					<button class="cu-btn block bg-gray margin-tb-sm lg" @tap="hideModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				tabArr: ['调货大厅', '我的调货'],
				TabCur: 0,
				tabName: '调货大厅',
				modalName: '',
				list: [],
				page: 1,
				rows: 6,
				pullUpOn: true,
				loading: false,
			}
		},
		onShow() {
			this.loadList(true)
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.tabName = this.tabArr[this.TabCur]
				this.loadList(true)
			},
			async loadList(refresh) {
				if (refresh) {
					this.list = []
					this.page = 1
					this.pullUpOn = true
				} else {
					if (this.pullUpOn) {
						this.loading = true
					}
				}
				let params = {
					skip: (this.page - 1) * this.rows,
					limit: this.rows,
					type: this.tabName
				};
				this.$func.wmzmall.call('transfer/list', params).then(res => {
					if (res.code === 200) {
						let data = res.datas.data;
						this.list = this.list.concat(data);
						this.page++;
						if (refresh) {
							uni.stopPullDownRefresh();
						}
						if (data.length < this.rows) {
							this.pullUpOn = false;
							this.loading = false;
						}
					} else {
						this.$api.msg(res.msg)
					}
				});
			},
			onReachBottom() {
				if (!this.pullUpOn) {
					return
				}
				this.loadList()
			},
			onPullDownRefresh() {
				this.loadList(true)
			},
			showModal() {
				this.modalName = 'receivablesModal'
			},
			hideModal() {
				this.modalName = ''
			},
			toCreate(type) {
				if (type === 0) {
					uni.navigateTo({
						url: 'transfer?type=' + type
					})
				} else {
					uni.navigateTo({
						url: 'create?type=' + type
					})
				}
				this.hideModal()
			},
			toDetail(id) {
				uni.navigateTo({
					url: 'detail?id=' + id
				})
			},
			takeOrderCreate(item) {
				uni.setStorageSync('wmz_transfer_goods_data', item.goods)
				uni.navigateTo({
					url: 'create?id=' + item._id
				})
			},
			takeOrder(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认接单？',
					success: (res) => {
						if (res.confirm) {
							this.$func.wmzmall.call('transfer/take', {
								id: id
							}).then(res => {
								if (res.code === 200) {
									this.$api.msg('接单成功')
									this.loadList(true)
								} else {
									this.$api.msg(res.msg)
								}
							});
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			cancelOrder(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认取消？',
					success: (res) => {
						if (res.confirm) {
							this.$func.wmzmall.call('transfer/cancel', {
								id: id
							}).then(res => {
								if (res.code === 200) {
									this.$api.msg('取消成功')
									this.loadList(true)
								} else {
									this.$api.msg(res.msg)
								}
							});
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			cancelTakeOrder(id) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认取消？',
					success: (res) => {
						if (res.confirm) {
							this.$func.wmzmall.call('transfer/cancelTakeOrder', {
								id: id
							}).then(res => {
								if (res.code === 200) {
									this.$api.msg('取消成功')
									this.loadList(true)
								} else {
									this.$api.msg(res.msg)
								}
							});
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		},
	}
</script>

<style>

</style>